<template>
  <div class="heatmap-container">
    <div id="userHeatmap" style="height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
import { getBehaviorHeatmap } from '@/api/redis'

export default {
  name: 'UserHeatmapChart',
  data() {
    return {
      chart: null,
      heatmapData: []
    }
  },
  mounted() {
    this.initChart()
    this.generateHeatmapData()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('userHeatmap'))
    },
    
    async generateHeatmapData() {
      try {
        // 从后端获取数据
        const response = await getBehaviorHeatmap()
        if (response.code === 200 && response.data && response.data.heatmapData) {
          this.heatmapData = response.data.heatmapData
        } else {
          // 获取失败时使用模拟数据
          this.generateMockData()
        }
        
        this.renderHeatmap()
      } catch (error) {
        console.error('获取热力图数据失败', error)
        this.generateMockData()
        this.renderHeatmap()
      }
    },
    
    generateMockData() {
      const now = new Date()
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const hours = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', 
                     '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', 
                     '19:00', '20:00', '21:00', '22:00', '23:00']
                     
      this.heatmapData = []
      
      // 生成近一周每小时的访问热度数据
      for (let day = 6; day >= 0; day--) {
        for (let hour = 0; hour < 24; hour++) {
          // 工作时间段活跃度高
          let baseValue = 0
          
          // 周一至周五工作时间段活跃度高
          if (day > 0 && day < 6 && hour >= 9 && hour < 18) {
            baseValue = 30
          }
          // 周末活跃度普遍较低
          else if ((day === 0 || day === 6) && hour >= 10 && hour < 20) {
            baseValue = 15
          }
          // 夜间活跃度低
          else if (hour >= 0 && hour < 6) {
            baseValue = 2
          }
          // 其他时间段
          else {
            baseValue = 8
          }
          
          // 添加随机波动
          const value = baseValue + Math.floor(Math.random() * baseValue)
          
          this.heatmapData.push([day, hour, value])
        }
      }
    },
    
    renderHeatmap() {
      const options = {
        title: {
          text: '用户访问活跃度热力图',
          left: 'center'
        },
        tooltip: {
          position: 'top',
          formatter: function (params) {
            return '访问量: ' + params.value[2]
          }
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', 
                 '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', 
                 '19:00', '20:00', '21:00', '22:00', '23:00'],
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 0,
          max: 60,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '5%',
          inRange: {
            color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
          }
        },
        series: [
          {
            name: '访问量',
            type: 'heatmap',
            data: this.heatmapData,
            label: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      
      this.chart.setOption(options)
    }
  }
}
</script>

<style scoped>
.heatmap-container {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style> 